<template>
	<view class="poster-box" :style="{ backgroundImage: 'url('+(backgroundImage || basketball)+')' }">
		<div class="content" :style="{ backgroundImage: 'url('+contentBg+')' }">
			<div class="content_item">
				<div class="sale_info Grid Grid--center Grid--justifySpaceBetween">
					<div class="Grid Grid--center">
						<image class="tx_img" :src="info.avatar_url_base64"></image>
						<div>{{info.author.nickname}}</div>
					</div>
					<div style="color: #D54941;font-size: 20px;">{{info.price * 1 ? info.price : '免费'}} <text v-if="info.price * 1">元</text></div>
				</div>
				<div class="title">{{info.title}}</div>
				<div v-if="Object.keys(info.match_info_obj).length" class="time-money">
					{{info.match_info_obj.competition_info.name}} {{info.match_info_obj.match_time.slice(5, 16)}}
				</div>
				<div v-if="!Object.keys(info.match_info_obj).length" style="height: 38px;"></div>
				<div v-if="Object.keys(info.match_info_obj).length" class="name">
					<div>{{info.match_info_obj.home_team_info.team_name}}</div>
					<img style="width: 35px;height: 27px;vertical-align: sub;" src="@/static/images/poster/vs.png" alt="">
					<div>{{info.match_info_obj.away_team_info.team_name}}</div>
				</div>
				<div class="name" v-else>
					<span>{{info.match_nick}}</span>
				</div>
				<div class="hint">扫码查看文章详情</div>
				<div style="position: absolute;left: 28px;bottom: 44px;">
					<slot></slot>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import basketball from '@/static/images/poster/basketball-bg1-5.png'
	import contentBg from '@/static/images/poster/content-bg.png'
	export default {
		name: "temp-basketball-1",
		props: {
			info: {
				type: Object,
				default: () => ({})
			},
			backgroundImage: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				basketball,//篮球背景图
				contentBg,
			}
		},
		computed: {
			
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.poster-box {
		width: 375px;
		height: 552px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 18px 14px;
		.content{
			width: 346px;
			// height: 318px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;
			position: absolute;
			bottom: 18px;
			.content_item{
				padding: 0 20px;
				.title{
					color: #222222;
					line-height: 22px;
					text-align: left;
					font-size: 16px;
					font-weight: 600;
					margin-bottom: 40px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
				.time-money{
					text-align: center;
					font-weight: 600;
					width: calc(100% - 140px);
					margin-left: 140px;
					margin-bottom: 15px;
				}
				.name{
					font-size: 14px;
					color: #C52929;
					text-align: center;
					margin: 2px 0;
					font-weight: 600;
					width: calc(100% - 140px);
				    margin-left: 140px;
					&>div{
						white-space: nowrap; /* 确保文本不会换行 */
						overflow: hidden; /* 隐藏超出容器的文本 */
						text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
					}
				}
				.sale_info{
					padding: 10px 0 16px;
					&>div{
						font-size: 20px;
					}
					.tx_img{
						height: 40px;
						width: 40px;
						border-radius: 100%;
						margin-right: 6px;
						::v-deep .el-image__inner{
							object-fit: cover;
						}
					}
				}
				.hint{
					text-align: left;
					color: #222222;
					padding-bottom: 18px;
				}
			}
		}
	}
</style>